<template>
  <div class="menutree">
    <span class="jiazai" v-if="dataList.length == 0"> 正在加载中... </span>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :default-openeds="defaultShowNodes"
    >
      <!-- @open="handleOpen"
      @close="handleClose" -->
      <el-submenu
        v-for="(item, index) in dataList"
        :index="item.key"
        :key="item.key"
      >
        <template slot="title">
          <img
            :src="item.img"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group
          style="background-color: #fff; padding-left: 24px"
          v-for="(ite, inde) in item.children"
          :key="ite.key"
        >
          <el-menu-item :index="ite.key" @click="handleNodeClick(ite)">{{
            ite.title
          }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "menutree",
  props: {},
  data() {
    return {
      defaultShowNodes: [],
      dataList: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  methods: {
    load(data) {
      this.defaultShowNodes = data.defaultShowNodes;
      this.dataList = data.treeList;
    },

    handleNodeClick(menu) {
      if (menu.children == null) {
        let kindId = menu.kindId;
        let programId = menu.programId;
        let kindName = menu.title;
        let url = "/chart";
        if (kindId != null) {
          url = url + "?kindId=" + kindId + "&kindName=" + kindName;
        }
        this.$router.push({
          path: url,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.jiazai {
  font-size: 0.3125rem;
  text-align: center;
  color: #ffffff;
}
.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0 0.1625rem 0 0.2625rem;
}
.el-tree-node__label {
  color: #fff;
  // font-size: 0.2625rem;
  font-size: 20px !important;
}
.el-submenu__title {
  color: #2d2d2d;
  font-size: 30px !important;
}
.el-submenu .el-menu-item {
  // color: #fff !important;
  background-color: #fff;
}
.el-menu-item.is-active {
  color: #409eff;
}
.el-submenu__title:hover {
  // background-color: #3b5493;
  // background-color: #ccc;
  background-color: #cce4fc;
}
.el-submenu__title:active {
  // background-color: #3b5493;
  background-color: #cce4fc;
}

.child-item .el-menu-item {
  background-color: #cce4fc !important;
}
.child-item .el-menu-item:hover {
  background-color: #cce4fc !important;
}
.el-menu-item {
  font-size: 20px !important;
}

.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #cce4fc;
}
.el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  color: #606266;
}
.is-expanded {
  background-color: #fff !important;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #3b8cf4;
}

.el-tree-node__content:hover {
  background-color: #f2f2f2;
}

.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content:active,
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content:active {
  background-color: #3b8cf4;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #3b8cf4;
}

.el-tree-node__content {
  height: 45px;
}
</style>
